<template>
  <div id="main-page">
    <div>
      <div class="top-panel">
        <div class="top-item">
          <el-button type="primary" @click="handleShowSingleAddDeptDialog()">单独增加</el-button>
        </div>
        <div class="top-item">
          <!-- <el-button type="primary" @click="excelAdd()">批量导入</el-button> -->
          <el-button @click="uploadDialog = true">批量导入</el-button>
          <el-dialog title="上传文件" :visible="uploadDialog" :before-close="closeDialog">
          <el-upload :action="action" :http-request="modeUpload">
            <el-button size="small" type="primary">点击选择文件</el-button>
          </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="imports">确认</el-button>
          <el-button @click="uploadDialog = false">取 消</el-button>
        </div>
      </el-dialog>


        </div>
      </div>

      <!-- 表格1 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="institute_name" label="机构名称">
        </el-table-column>
        <el-table-column prop="dept_name" label="科室名称">
        </el-table-column>
        <el-table-column prop="dept_root_name" label="科室主任">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">修改</el-button>
            <el-button type="text" @click="del(scope.row)" style="color: #f56c6c;">删除</el-button>
            <el-button type="text" @click="look(scope.row)">查看科室医生</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%">
      <el-form label-position="left" label-width="100px" :model="formLabelAlign">
        <el-form-item label="修改科室名称">
          <el-input placeholder="输入科室名称" v-model="formLabelAlign.dept_name"></el-input>
        </el-form-item>
        <el-form-item label="修改科室主任">
          <el-input placeholder="输入身份证" v-model="formLabelAlign.dept_root"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="editForm()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 单独增加弹窗 -->
    <el-dialog title="单独增加科室信息" :visible.sync="showSingleAddDeptDialog" width="30%">
      <el-form label-position="left" label-width="100px" :model="formLabelAlign">
        <el-form-item label="科室名称">
          <el-input placeholder="输入科室名称" v-model="singleAddDeptForm.dept_name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="管理员身份证">
          <el-input placeholder="输入身份证" v-model="singleAddDeptForm.root_card"></el-input>
        </el-form-item> -->
        <el-form-item label="管理员身份证">
          <el-select v-model="singleAddDeptForm.root_card" placeholder="请选择管理员">
            <!-- <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option> -->
            <!-- <el-option :label="item.label" :value="item.value"></el-option> -->
            <el-option v-for="(item, index) in cardList" :key="index" :label="item.label"
              :value="item.id_card"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showSingleAddDeptDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmSingleAddDeptDept()">确 定</el-button>
      </span>
    </el-dialog>
    <div class="pagination-panel">
      <el-pagination @current-change="changePage" background layout="prev, pager, next" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import { department, organization  } from '@/api';
import { Card } from 'element-ui';
export default {
  data() {
    return {
      uploadDialog: false,
      action: 'https://jsonplaceholder.typicode.com/posts/',
      file: {},
      dialogVisible1: false,
      showSingleAddDeptDialog: false,
      tableData: null,
      keyWord1: null,
      data: {
        cur: 1,
        institute_id: 1,
        name: null,
      },
      tableData: null,
      total: 0,
      formLabelAlign: {
        dept_name: null,
        dept_root: null,
      },
      singleAddDeptForm: {
        dept_name: null,
        root_card: null,
      },
      currentItem: null,
      cardList: [],
    }
  },
  created() {
    this.getDataList();
    
  },

  methods: {

    // 批量导入（excel）
    excelAdd() {

    },

    handleChange(e) {
      // console.log(e);
      // let formData = new FormData();
      // formData.append(file, e.raw);
      // let file = e.raw;
      // department.excelAdd(file).then(res => {
      //   console.log(res);
      // })
    },
    // 单独增加
    handleShowSingleAddDeptDialog() {
      this.showSingleAddDeptDialog = true;
      department.getUserTipsInfo().then(res => {
        console.log(res);
        this.cardList = res.data.data.map(item => {
          // item.label = item.name + ' ' + item.id_card;
          item.label = `姓名：${item.name} 身份证：${item.id_card}`;
          return item;
        });
        this.singleAddDeptForm = {
          dept_name: null,
          root_card: null,
        };
      }).catch(err => {
        console.log(err);
      })
    },

    confirmSingleAddDeptDept() {
      department.singleAddDept(this.singleAddDeptForm).then(res => {
        console.log(res);
        this.getDataList();
      }).catch(err => {
        console.log(err);
        this.showSingleAddDeptDialog = false;
      })
    },
    changePage(value) {
      this.data.cur = value;
      this.getDataList();
    },
    getDataList() {
      this.dialogVisible1 = false;
      this.showSingleAddDeptDialog = false;
      department.dSearch(this.data).then(res => {
        console.log(res);
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
      })
    },

    searchDepartmentByKeyWord() {

    },

    edit(item) {
      console.log(item);
      this.dialogVisible1 = true;
      this.currentItem = item;
      this.formLabelAlign.dept_name = item.dept_name;
    },

    editForm() {
      console.log(this.formLabelAlign);
      const data = {
        deptInfoVO: {
          ...this.formLabelAlign,
          dept_id: this.currentItem.dept_id,
        },
        oldRoot_card: this.currentItem.root_card,
      }
      department.updateDepartmentInfo(data).then(res => {
        console.log(res);
        this.getDataList();

      }).catch(err => {
        console.log(err);
        this.dialogVisible1 = false;
      })
    },

    del(item) {
      // console.log(item);
      department.del({ dept_id: item.dept_id }).then(res => {
        console.log(res);
        this.getDataList();
      }).catch(err => {
        console.log(err);
      })
    },

    look(item) {
      console.log(item);
      //自己修改要传的页面参数
      this.$router.push({
        name: "Department",
        query: { id: 1 }
      });
      const data = {
        curIndex: this.data.cur,
        institute_id: this.data.institute_id,
        dept_id: item.dept_id,
      }
      department.getInstituteUserInfo(data).then(res => {
        this.table1 = !this.table1;
        console.log(res);
        this.tableData = res.data.data;
      })
    },

    back() {
      this.table1 = !this.table1;
      this.getDataList();
    },
    modeUpload(item) {
      		this.file = item.file
    	},
    imports() {
      		const file = new window.FormData()
          file.append('file', this.file)
      		department.excelAdd(file).then(res => {
            console.log("upload file")
            console.log(res)
            this.$message({
              message: "插入数据：" + res.data.data.msg,
              type: 'success'
            });
            this.closeDialog()
          })
         
      	
    	},
      closeDialog() {
      this.uploadDialog = false;
    },

  }
}
</script>

<style></style>